<template>
  <div class='ide-container'>
    <div id="axis_root" class="panel-axis" style="flex-direction: column">
      <div id="panel_menu_bar" class="panel-container column" style="overflow:visible;flex-grow:0;flex-basis:auto">
        <div class='panel'>
          <MenuBar/>
        </div>
      </div>
      <div id="panel_breadcrumbs" class="panel-container column" style="overflow:visible;flex-grow:0;flex-basis:auto">
        <div class='panel'>
          <Breadcrumbs/>
        </div>
      </div>
      <div class="panel-container column">
        <div id="axis_primary" class="panel-axis" style="flex-direction: row">
          <div id="panel_left_bar" class="panel-container row" style="overflow:visible;flex-grow:0;flex-basis:auto">
            <div class='panel'>
              <SideBar side="left" />
            </div>
          </div>
          <div class="panel-container row ">
            <div id="axis_stage" class="panel-axis" style="flex-direction: column">
              <div id="panel_top" class="panel-container column " style="flex-grow:75;">
                <div class="panel-axis" style="flex-direction: row">
                  <div id="panel_left" class="panel-container row resizable" style="flex-grow:10;">
                    <div class='panel'>
                      <SidePanel default-active-index="fileTree">

                        <SidePanelView index="fileTree">
                          <FileTree/>
                        </SidePanelView>
                      </SidePanel>
                    </div>
                    <ResizeBar view-id="panel_left" flex-direction="row" />
                  </div>
                  <div id="panel_center" class="panel-container row resizable" style="flex-grow:60;">
                    <div class='panel'>
                      <PanelEditor />
                    </div>
                    <ResizeBar view-id="panel_center" flex-direction="row" />
                  </div>
                  <!-- <div id="panel_right" class="panel-container row resizable" style="flex-grow:20;">
                    <div class='panel'>
                      panel_right
                    </div>
                    <ResizeBar view-id="panel_right" flex-direction="row" />
                  </div> -->
                </div>
                <ResizeBar view-id="panel_top" flex-direction="column" />
              </div>
              <div id="panel_bottom" class="panel-container column resizable" style="flex-grow:25;">
                <div class='panel'>
                  panel_bottom
                </div>
              </div>
              <div id="panel_bottom_bar" class="panel-container column" style="overflow:visible;flex-grow:0;flex-basis:auto">
                <div class='panel'>
                  panel_bottom_bar
                </div>
              </div>
            </div>
          </div>
          <div id="panel_right_bar" class="panel-container row" style="overflow:visible;flex-grow:0;flex-basis:auto">
            <div class='panel'>
              <SideBar side="right" />
            </div>
          </div>
        </div>
      </div>
      <div id="panel_status_bar" class="panel-container column" style="overflow:visible;flex-grow:0;flex-basis:auto">
        <div class='panel'>
          panel_status_bar
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { ResizeBar, SideBar, SidePanel, SidePanelView } from './components/panel'
  import MenuBar from './components/menu-bar'
  import Breadcrumbs from './components/breadcrumbs'
  import FileTree from './components/file-tree'
  import PanelEditor from './components/panel-editor'
  import ide from './IDE'

  export default {
    name: 'App',
    components: {
      ResizeBar,
      MenuBar,
      Breadcrumbs,
      SideBar,
      SidePanel,
      SidePanelView,
      FileTree,
      PanelEditor
    },
    created () {
      this.$store.dispatch('file/initializeFileTree')
      window.ide = ide
    }
  }

</script>
